<template>
  <el-dialog
    v-model="$store.state.uploadAdd"
    title="批量添加"
    width="30%"
    append-to-body
  >
    <el-upload
      ref="uploadRef"
      v-model:file-list="uploatfileList"
      class="upload-demo"
      :action="url"
      :auto-upload="false"
      accept=".xls,.xlsx"
      :on-error="uploadFileError"
      :on-success="uploadFileSuccess"
    >
      <template #trigger>
        <el-button type="primary">选择文件</el-button>
      </template>

      <template #tip>
        <div class="el-upload__tip">xls/xlsx 大小小于500kb的文件</div>
      </template>
    </el-upload>
    <template #footer>
      <div>
        <el-button type="danger" @click="close"> 取消 </el-button>

        <el-button class="ml-3" type="success" @click="submitUpload">
          确认上传
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import store from "@/store";
import { ref } from "vue";
import { toast } from "@/utils";

const props = defineProps(["url"]);
const emit = defineEmits();

const uploadRef = ref();

const uploatfileList = ref([]);

const submitUpload = () => {
  // console.log(`output->submitUpload`, uploadRef);
  uploadRef.value.submit();
  emit("addSuccess", false);
};
const uploadFileSuccess = (response, file, fileList) => {
  if (response.code == 200) {
    toast("上传成功");
  } else {
    toast(response.msg + ",请检查数据是否已存在", "warning");
  }
  uploatfileList.value = [];
};
const uploadFileError = (error, uploadFile, uploadFiles) => {
  console.log(`output->`, error, uploadFile, uploadFiles);
  // this.$refs.upload.clearFiles();
  toast("上传失败，请重新上传", "error");
};

function close() {
  store.commit("setUploadAdd", false);
}
</script>

<style scoped>
.button {
  color: #fff;
  background-color: #409eff;
  border-color: #409eff;
  padding: 10px 20px;
  font-size: 14px;
  border-radius: 5px;
}
</style>
